<template>
	<!-- navbar -->
	<CpNavBar>
		<template v-slot:center>
			我的帖子
		</template>
	</CpNavBar>
	<view class="post_list">
		<up-notice-bar text="向👈滑动尝试编辑功能"></up-notice-bar>
		<view class="post_item" v-for="post in userPost" :key="post._id">
			<up-swipe-action>
				<up-swipe-action-item :options="options" @click="delPost" :name="post._id" :autoClose="true">
					<view class="swipe-action up-border-top up-border-bottom">
						<view class="swipe-action__content">
							<PostItem :post="post" :showUser="false" :showControls="false"></PostItem>
						</view>
					</view>
				</up-swipe-action-item>
			</up-swipe-action>
			<!--  -->
			<up-popup v-if="postPopupVisible[post._id]" :show="postPopupVisible[post._id]" @close="postPopupVisible[post._id] = false" mode="bottom" round="20" :closeable="true">
				<PubPost @refSubmit="submitPost" :postItem="post" :edit="true"></PubPost>
			</up-popup>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import PostItem from '@/components/PostItem.vue'
	import { useUserStore } from '@/store'
	import { FileUrl } from '@/utils/FileUrl.js'
	import PubPost from '@/components/PubPost.vue'
	import { UploadImg } from '@/utils/UploadImg.js'
	
	// popup弹出层
	// const showPop = ref(false) 
	const postPopupVisible = ref({})
	  
	const userStore = useUserStore()
	const options = ref([  
	  {  
		text: '编辑',  
		style: {  
		  backgroundColor: '#3c9cff'  
		}  
	  },  
	  {  
		text: '删除',  
		style: {  
		  backgroundColor: '#f56c6c'  
		}  
	  }  
	])
	const userPost = ref([])
	// 获取个人帖子
	const getUserPost = async () => {
		const openid = await userStore.getOpenID()
		// const openid = "olCw55aJcTf6-dlIRtc6OInLFSMk"
		const res = await uniCloud.callFunction({
			name: 'get-post',
			data: { userOpenid: openid }
		})		
		// console.log(res)
		// 图片转临时链接
		const data = res.result.data
		const convertUrl = await Promise.all(data.map(async item => {
			item.images = await FileUrl(item.images)
			return item
		}))
		// 合并数据
		userPost.value = [...userPost.value, ...data]
	}
	getUserPost()
	// 删除帖子
	const delPost = async (e) => {
		if(e.index === 1){
			uni.showLoading({ title: '删除中', mask: true })
			const res = await uniCloud.callFunction({
				name: 'delete-post',
				data: { _id: e.name }
			})
			console.log(res)
			userPost.value = userPost.value.filter(item => item._id != e.name)
			uni.hideLoading()
		}else{
			postPopupVisible.value[e.name] = !postPopupVisible.value[e.name];
		}
	}
	const newData = ref({})
	// 更新帖子
	const submitPost = async (childPost) => {
		uni.showLoading({
			title: '更新中',
			mask: true
		})
		newData.value = {...childPost}
		// 过滤处不需要上传的图片
		const filterImg = childPost.images.filter(item => item.isNew) 
		
		newData.value.images = filterImg
		// 上传图片
		const url = newData.value.images.map(async item => {
			const res = await UploadImg(item)
			return res
		})
		newData.value.images = await Promise.all(url)
		// // 更新数据库
		const res = await uniCloud.callFunction({
			name: 'update-post',
			data: { data: newData.value }
		})
		postPopupVisible.value = false
		uni.hideLoading()
	}
</script>

<style lang="scss">
    .u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;
    
            &__text {
                 font-size: 15px;
                 color: #000000;
                 padding-left: 30rpx;
             }
        }
    }
	.post_list .post_item{margin-bottom: 10rpx;}
</style>
